<template lang="pug">
.system-header
  .header-background
    .back-hot(@click="handleBack")
    .datetime {{ clock.text }}
  .navigation
    .navi-item(v-for="(item, index) in navigation.list"
      :class="{'active': navigation.currentIndex === item.page, 'disabled': item.disabled}"
      @click="handleNaviItemClick(item)"
      :key="index")
      .angel-wrap
      span {{ item.name }}
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "SystemHeader",
  props: {
    isLogin: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      navigation: {
        currentIndex: 1,
        list: [
          {
            name: '数字农业概览',
            page: 1,
            disabled: false,
          },
		  {
		    name: '产业监管一张图',
		    page: 5,
		    disabled: false,
		  },
		  {
		    name: '产业经济一张图',
		    page: 6,
		    disabled: false,
		  },
          {
            name: '农业资源一张图',
            page: 2,
            disabled: true,
          },
          {
            name: '种植业一张图',
            page: 3,
            disabled: false,
          },
          {
            name: '养殖业一张图',
            page: 4,
            disabled: true,
          },
          
        ],
      },
      clock: {
        timer: null,
        text: ''
      }
    }
  },
  computed: {
    ...mapGetters({}),
  },
  watch: {
    isLogin() {
      this.recoveryNavigate();
    }
  },
  methods: {
    numberPadding(number) {
      return (number>10)?number:`0${number}`;
    },
    handleBack() {
      this.$router.replace({
        path: '/splash',
      })
    },
    refreshTimeText() {
      const now = new Date();
      const week = `星期${['日','一','二','三','四','五','六'][now.getDay()]}`;
      const time = this.numberPadding(now.getHours()) + ':' + this.numberPadding(now.getMinutes());
      const year = now.getFullYear();
      const month = this.numberPadding((now.getMonth() + 1));
      const date = this.numberPadding(now.getDate());
      this.clock.text = `${year}-${month}-${date} ${time} ${week}`;
    },
    handleClockStart() {
      this.clock.timer = setInterval(() => {
        this.refreshTimeText();
      }, (1000 * 30));
      this.refreshTimeText();
    },
    handleNaviItemClick(item) {
      if (this.navigation.currentIndex !== item.page && !item.disabled) {
        this.navigation.currentIndex = item.page;
        this.$router.replace({
          name: `page${item.page}`,
        });
      }
    },
    recoveryNavigate() {
      this.navigation.currentIndex = parseInt(this.$route.path.substr(-1));
    }
  },
  mounted() {
    this.recoveryNavigate();
    this.handleClockStart();
  }
}
</script>

<style lang="scss" scoped>
@keyframes net-error {
  0%,
  100%{
    box-shadow: 0 0 5px rgba(240, 132, 95, 1);
  }
  50%{
    box-shadow: 0 0 20px rgba(240, 132, 95, .75);
  }
}

.system-header{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  &:before{
    content: '';
    display: block;
    position: absolute;
    height: 200%;
    width: 100%;
    z-index: 1;
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 15, 21, 0.85) 50%, rgba(0, 15, 21, 0));
  }
  .header-background{
    height: rem(80);
    background: url("~@/assets/images/header_bg.png") no-repeat center ;
    background-size: 100% 100%;
    z-index: 1;
    position: relative;
    &:after{
      content: '';
      @extend %abs-full;
      background: url("~@/assets/images/header_effect.gif") no-repeat center;
      background-size: 100% 100%;
    }
    .back-hot{
      width: rem(160);
      height: 50%;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      z-index: 9;
    }
    .datetime{
      position: absolute;
      top: rem(18);
      right: rem(80);
      color: #CAFCFF;
      @include fontSie(16);
      font-weight: 700;
    }
  }
  .navigation{
    padding-top: rem(30);
    display: flex;
    @include fontSie(20);
    justify-content: center;
    .navi-item{
      cursor: pointer;
      padding: 0 rem(40);
      position: relative;
      z-index: 2;
      color: #05FDBB;
      display: revert;
      font-weight: bold;
      &:after{
        content: '';
        width: 80%;
        background-color: #FFFFFF;
        height: rem(2);
        left: 10%;
        position: absolute;
        bottom: rem(-14);
        visibility: hidden;
      }
      .angel-wrap{
        position: absolute;
        width: 100%;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        &:before,
        &:after{
          content: '';
          display: block;
          position: absolute;
          top: 0;
          transform: translateY(-50%);
          visibility: hidden;
        }
        &:before{
          left: 0;
          border-top: rem(12) solid transparent;
          border-bottom: rem(12) solid transparent;
          border-left: rem(20) solid #FFFFFF;
          @include square(0);
        }
        &:after{
          right: 0;
          border-top: rem(12) solid transparent;
          border-bottom: rem(12) solid transparent;
          border-right: rem(20) solid #FFFFFF;
          @include square(0);
        }
      }
      &.active{
        color: #CAFCFF;
        text-shadow: 0px 0px 14px #05FDBB;
        &:after{
          visibility: visible;
        }
        .angel-wrap{
          &:before,
          &:after{
            visibility: hidden;
          }
        }
      }
      &.disabled{
        color: #999999;
        cursor: not-allowed;
      }
    }
  }
}
</style>
